<template>
  <div class="banner relative" id="aviation-detail-banner">
    <div
      class="banner-background"
      v-if="loaded"
      :style="{ backgroundImage: `url('${data?.course_ku_single_pic}')` }"
    ></div>
    <Container
      class="aviation-banner-container"
      padding-top="0"
      padding-bottom="0"
    >
      <div class="header">
        <template v-if="loaded">
          <div class="left-img">
            <img :src="data?.course_ku_single_pic" alt="" />
          </div>
          <div class="inner-box pc-detail-info">
            <div class="inner">
              <div class="title">{{ data?.course_ku_title }}</div>
              <div class="details">
                <div class="cat">{{ data?.course_cat_title }}</div>
                <div class="divider"></div>
                <div class="course-id">
                  {{ $t("content.aviation_detail.course_id") }}：{{
                    data?.course_no
                  }}
                </div>
                <div class="divider order-2"></div>
                <div class="start-time">
                  {{ $t("content.aviation_detail.time") }}：{{ data?.ymd }}
                </div>
                <div class="divider order-3"></div>
                <div class="people">
                  {{ $t("content.aviation_detail.trainers_num") }}：{{
                    data?.people
                  }}
                </div>
                <div class="divider order-4"></div>
                <div class="time">
                  {{ $t("content.aviation_detail.trainers_time") }}：{{
                    data?.day
                  }}{{ $t("unit.day") }}
                </div>
                <div class="position">
                  <span>
                    {{ $t("content.aviation_detail.trainers_address") }}：
                  </span>
                  <span>{{ data?.course_address_title }}</span>
                </div>
                <div class="teacher">
                  <span
                    >{{
                      $t("content.aviation_detail.trainers_teacher")
                    }}：</span
                  >
                  <span>
                    {{ data?.teacher.title }}
                  </span>
                </div>
              </div>
              <a-button size="large" type="primary" block @click="toApply">{{
                $t("btnText.imed_sign")
              }}</a-button>
            </div>
          </div>
          <div class="mobile-detail-info">
            <div class="title">
              {{ data?.course_ku_title }}
            </div>
            <div class="details">
              <div class="row">
                <div v-if="data?.course_cat_title">
                  {{ data?.course_cat_title }}
                </div>
                <div>
                  <span> {{ $t("content.aviation_detail.course_id") }}：</span>
                  <span>{{ data?.course_no }}</span>
                </div>
              </div>
              <div class="row">
                <div>
                  <span>{{ $t("content.aviation_detail.time") }}：</span>
                  <span>{{ data?.ymd }}</span>
                </div>
                <div>
                  <span>
                    {{ $t("content.aviation_detail.trainers_time") }}：
                  </span>
                  <span>{{ data?.day }}</span>
                </div>
              </div>
              <div class="row address-num">
                <div>
                  <span><IconAddress fill="#70818C" /></span>
                  <span
                    >{{ $t("content.aviation_detail.trainers_address") }}：{{
                      data?.course_address_title
                    }}</span
                  >
                </div>
                <div>
                  <span> <IconUserGroup fill="#70818C" /></span>
                  <span>
                    {{ $t("content.aviation_detail.trainers_num") }}：{{
                      data?.people
                    }}</span
                  >
                </div>
              </div>
              <div class="row stu-list" v-if="loaded">
                <div class="stu-title">
                  {{ $t("content.aviation_detail.employ_person") }}
                </div>
                <div class="stus">
                  <Vue3Marquee pause-on-hover>
                    <div class="stus-list">
                      <div
                        class="stus-item"
                        v-for="item in stuList?.flat(2)"
                        :key="item.id"
                      >
                        <img
                          class="logo"
                          v-logo-error
                          :src="item.headimgurl"
                          alt=""
                          v-if="item.headimgurl"
                        />
                        <img
                          class="logo"
                          src="~/assets/images/user-logo/default_logo.jpg"
                          alt=""
                          v-else
                        />
                      </div>
                    </div>
                  </Vue3Marquee>
                </div>
                <div class="stu-num">{{ 1255 }}人</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="pc-skeleton flex-1">
            <div class="header">
              <div class="left-img">
                <Skeleton block height="100%" black></Skeleton>
              </div>
              <div class="inner-box">
                <div class="inner">
                  <div class="pc-skeleton">
                    <div class="details">
                      <div class="title">
                        <Skeleton
                          gap-skeleton
                          white
                          height="40px"
                          width="50%"
                        ></Skeleton>
                        <Skeleton white :rows="5"></Skeleton>
                      </div>
                    </div>
                    <Skeleton
                      height="48px"
                      white
                      block
                      radius="12px"
                    ></Skeleton>
                  </div>
                  <div class="mobile-skeleton">
                    <div class="title">
                      <Skeleton gap-skeleton mobile width="50%"></Skeleton>
                    </div>
                    <Skeleton :rows="2" mobile></Skeleton>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mobile-skeleton flex-1">
            <Skeleton avatar block height="1229px" />
            <div class="mobile-detail-info">
              <div class="title">
                <Skeleton mobile :rows="2" />
              </div>
              <div class="details">
                <Skeleton :rows="4" mobile />
              </div>
            </div>
          </div>
        </template>
      </div>
    </Container>
    <!-- 报名弹窗 -->
    <DialogFillInfo
      v-if="loaded"
      ref="dialogFillInfoRef"
      :checkList="data?.list"
      :course_id="data?.id"
    ></DialogFillInfo>
  </div>
</template>

<script setup lang="ts">
import { Vue3Marquee } from "vue3-marquee";

import { getCurrentInstance, inject, ref } from "vue";
import { useCacheStore, useMemberStore } from "../../../store";
import { message } from "ant-design-vue";
import type { CourseView } from "../../../types/aviation";
import { postCourseSubmitTab } from "../../../api/aviation";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const loaded = inject("loaded");

// props =================================================================
type Props = {
  data: CourseView;
  stuList: any[];
};
const props = defineProps<Props>();

// =================================================================
const memberStore = useMemberStore();
const cacheStore = useCacheStore();
const dialogFillInfoRef = ref();
const toApply = async () => {
  if (!memberStore.profile) {
    message.warning($t("message.wait_login"));
    return;
  }
  if (!dialogFillInfoRef.value) return;
  dialogFillInfoRef.value.show();
  return;
  let courseList = cacheStore.profileData.exam?.courseList;
  if (!courseList) {
    let res = await postCourseSubmitTab();
    if (res.code === 200) {
      courseList = res.data || [];
      cacheStore.profileData.exam.courseList = res.data;
    }
  }
  if (courseList && courseList.length > 0) {
    let courseId = props.data.id;
    let isExist = courseList.some((item) => item.course_id === courseId);
    if (isExist) {
      message.warning($t("message.warning.have_applied"));
      return;
    }
  }
};
</script>
<style scoped lang="less">
.banner {
  overflow: hidden;
  .banner-background {
    overflow: hidden;
    position: absolute;
    inset: 0;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("~/assets/img/aviation_img.png");
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: inherit;
      filter: blur(20px);
    }
  }
}
.header {
  display: flex;
  justify-content: flex-end;
  position: relative;
  height: 472px;
  .left-img {
    flex: 1;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
  .divider-line {
    background-color: rgba(255, 255, 255, 0.2);
    width: 120px;
    margin-top: 16px;
    margin-bottom: 22px;
  }
  .inner-box {
    display: flex;
    align-items: center;
    background: rgba(54, 67, 77, 0.9);
    padding: 0 40px;
    padding-top: 64px;
    padding-bottom: 66px;
    width: 440px;
    .inner {
      flex: 1;
    }
    .title {
      font-size: 32px;
      color: #ffffff;
    }
    .details {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.6);
      margin-bottom: 26px;
      margin-top: 16px;
      .divider {
        display: none;
      }
    }
    .ant-btn {
      height: 48px !important;
      font-size: 24px !important;
      border-radius: 8px !important;
    }
  }
}
.mobile-detail-info {
  display: none;
  position: relative;
  z-index: 4;
  .title {
    padding: 61px 82px;
    padding-bottom: 0;
    margin-bottom: 61px;
    font-size: 102px;
    color: #ffffff;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    text-overflow: ellipsis;
  }
  .details {
    background-color: #fff;
    border-radius: 164px 164px 0px 0px;
    padding: 102px 82px 61px;
    font-size: 72px;
    color: #70818c;
    .row {
      display: flex;
      margin-bottom: 61px;
      flex-direction: column;
      gap: 61px;
      &.address-num {
        margin-bottom: 59px;
        font-size: 61px;
        & > div {
          display: flex;
          gap: 41px;
          span:first-child {
            margin-top: 1px;
          }
        }
      }
    }
    .stu-list {
      display: flex;
      gap: 61px;
      align-items: center;
      flex-direction: row;
      padding: 51px 0;
      .title,
      .stu-num {
        font-size: 61px;
      }
      .stu-num {
        color: #323232;
      }
      .stus {
        flex: 1;
        overflow: hidden;
        display: flex;
        align-items: center;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          right: -5px;
          top: 0;
          bottom: 0;
          width: 150px;
          z-index: 9;
          background: linear-gradient(
            to left,
            rgba(255, 255, 255, 1),
            transparent
          );
        }
        .stus-list {
          display: flex;
          align-items: center;
          white-space: nowrap;
          gap: 61px;
          margin-right: 61px;
          .stus-item {
            width: 102px;
            height: 102px;
            display: inline-block;
            img.logo {
              width: 102px;
              height: 102px;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .banner {
    display: flex;
    flex-direction: column;
    img.background {
      height: 100%;
      width: 100%;
      filter: blur(0px);
    }
    .banner-background {
      height: 2000px;
      background-size: auto 100%;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: inherit;
        filter: blur(30px);
      }
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background-image: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.6),
          rgba(0, 0, 0, 0.6) 30%,
          transparent 50%,
          transparent
        );
      }
    }
  }
  :deep(.aviation-banner-container) {
    position: relative;
    // z-index: 2;
    & > .wrap-container {
      position: static;
      & > div {
        padding: 0;
      }
    }
  }
  .header {
    padding-right: 0;
    position: static;
    flex-direction: column;
    height: auto;
    .left-img {
      height: 1229px;
      position: relative;
      flex: 0 1 auto;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 650px;
        background-image: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.4) 0%,
          transparent 50%,
          transparent 100%
        );
        bottom: -600px;
        backdrop-filter: blur(10px);
      }
    }
    .inner-box {
      background-color: #fff;
      flex: 1;
      padding: 82px 0;
      .title {
        font-size: 92px;
        color: #172026;
      }
      .divider-line {
        display: none;
      }

      .ant-btn {
        display: none;
      }
      .course-id {
        position: absolute;
        top: 0;
        right: 0;
        padding: 20px 41px;
        background: rgba(0, 0, 0, 0.4);
        border-bottom-left-radius: 41px;
        color: rgba(255, 255, 255, 0.8);
      }
      .details {
        font-size: 61px;
        display: flex;
        flex-wrap: wrap;
        color: #70818c;
        align-items: center;
        .divider {
          height: 41px;
          background-color: #ccd6de;
          width: 3px;
          margin: 0 36px;
          display: block;
        }
        .name {
          order: 0;
        }
        .position {
          order: 1;
        }
        .teacher {
          order: 2;
        }
        .start-time {
          order: 3;
        }
        .people {
          order: 4;
        }
        .time {
          order: 5;
        }
      }
      &.pc-detail-info {
        display: none;
      }
    }
    .mobile-detail-info {
      display: block;
    }
  }
}
</style>
